<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <title>图书详情</title>
    <link rel="stylesheet" type="text/css" th:href="@{/style/tzjg.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">
</head>
<body>
<!--头开始-->
<header class="navbar-fixed-top headerbg">
    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi">
                <h3>
                    <a th:href="@{/myBook}" style="text-decoration: none" th:text="'hello，'+${username}">hello，xxx</a>
                </h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/index}">返回首页</a></h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/revampUser}">修改信息</a></h3>
            </li>
            <li class="navLi">
                <h3>&nbsp;&nbsp;&nbsp;</h3>
            </li>
            <li class="navLi">
                <h3><a th:href="@{/loginout}">注销</a></h3>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height:200px;">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>
<!--动态线条结尾-->

<hr class="layui-bg-green" style="height: 3px;margin-top: 20px">

<div class="container" style="margin-left: 20%;margin-top: 10px">
    <div class="col-xs-12 col-sm-9 col-md-9 Details_Into">
        <div class="title_name mtb20 center">
            <h2 th:text="${book.bookName}">书名</h2>
            <h5 class="color3">作者：<i th:text="${book.bookAuthor}">作者</i>
                出版社：<i th:text="${book.bookPublishers}">出版社</i>
                &nbsp;&nbsp;书籍类型：<span th:switch="${book.bookType}">
                                                    <span th:case="1">古典文学</span>
                                                    <span th:case="2">青春文学</span>
                                                    <span th:case="3">小说</span>
                                                    <span th:case="4">艺术</span>
                                                    <span th:case="5">文化</span>
                                                    <span th:case="6">历史</span>
                                                    <span th:case="6">经济</span>
                                    </span>
            </h5>
        </div>
        <div class="content mb30">
            <div style="float:left;">
                <img class="lazyloadimg" alt="书籍封面"
                     th:src="@{'/article/'+ ${book.photo}}"
                     width="200px" height="200px"/>
                <br>
            </div>
            <div>
                <p style="margin-left: 5px;width: 180px;margin-top: 5px;float: left" class="layui-btn">书籍总量:<i
                        th:text="${book.bookAllNum}+'本'"></i></p>
                <p style="margin-left: 5px;width: 180px;margin-top: 5px;float: left" class="layui-btn">书籍余量:<i
                        th:text="${book.bookNum}+'本'"></i></p>
                <br><br><br><br>
                <span style="margin-left: 5px;margin-top: 5px">
                    <a href="javascript:void(0);" th:onclick="'javascript:borrowingBook('+${book.bookNumber }+')'"
                       style="margin-left: 5px;width: 360px;margin-top: 5px;float: left" class="layui-btn"
                       id="jy">借阅本书</a></span>
            </div>
            <br><br><br><br>
            <hr style="width: 750px;float: left;" class="layui-bg-green">
            <div style="margin-top: 30px;width: 750px;height: 400px; ">
                <div>
                    <h3 style="font-family: Gadugi;color: #8888cc;font-weight: bold;margin-left: 10px;padding-top:5px"
                        ;>
                        书籍简介:</h3>
                    <div style="margin-left: 15px;margin-top: 10px" th:text="${book.brief}">
                        书籍简介
                    </div>
                    <h3 style="font-family: Gadugi;color: #8888cc;font-weight: bold;margin-left: 10px;padding-top:5px"
                        ;>
                        最新借阅状态:</h3>
                    <div style="margin-left: 15px;margin-top: 10px" th:each="lists:${list}">
                        <ul class="list_style">
                            <li class="news_info wow fadeInUp">
                                <p th:text="${'用户（'+lists.userNumber+'）于'}"style="display: inline">用户名</p>
                                <p th:text="${#dates.format(lists.borrowingTime,'yyyy-MM-dd hh:mm:ss')}"style="display: inline">时间</p>
                                <p th:text="${'借阅了《'+lists.getBook().bookName+'》'}"style="display: inline">书名</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="layui-bg-green" style="height: 3px;margin-top: 20px">
<footer class="footerBg">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span>
        <span class="CopyRight_name" style="padding-right: 10px">图书管理系统 </span></div>
</footer>


<script type="text/javascript" th:src="@{/js/function.js}"></script>
<script type="text/javascript" th:src="@{/js/tzjg.js}"></script>
<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/borsertocss.js}"></script>
<script th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
<script>
    function borrowingBook(obj) {
        $.ajax({
            url: '/booksystem/borrowingBook',
            type: "post",
            data: {bookNumber: obj},
            resultType: 'json',
            success: function (res) {
                if (res == "1") {
                    layer.msg('借阅成功，请爱惜书籍！');
                    $('#jy').html("已借阅");
                } else if (res == "2") {
                    layer.msg('您已借阅本书，请勿重复点击');
                } else if (res == "3") {
                    layer.msg('书籍余量不足');
                } else if (res == "4") {
                    layer.msg('您已经借阅2本书了，请先将书归还再借阅本书')
                }
            }
        })
    }
</script>
<script type="text/javascript">
    window.onload = function () {
        var bookNumber = [[${book.bookNumber}]];

        $.ajax({
            url: '/booksystem/borrowingFettle',
            type: "post",
            data: {bookNumber: bookNumber},
            success: function (data) {

                if (data == "1") {
                    $('#jy').html("已借阅");
                } else {
                    $('#jy').html("借阅图书");
                }
            }
        });
    }
</script>

</body>
</html>